<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title th:text="${product.id == null ? '添加商品' : '编辑商品'}">商品表单</title>
</head>
<body>
    <div layout:fragment="title" th:text="${product.id == null ? '添加商品' : '编辑商品'}">商品表单</div>
    
    <div layout:fragment="content">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card shadow">
                    <div class="card-body">
                        <form th:action="${product.id == null} ? @{/products/add} : @{/products/edit/{id}(id=${product.id})}"
                              th:object="${product}" method="post">
                            
                            <!-- 基本信息 -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">基本信息</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="name" class="form-label">商品名称 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="name" th:field="*{name}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="barcode" class="form-label">条形码</label>
                                            <input type="text" class="form-control" id="barcode" th:field="*{barcode}">
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="category" class="form-label">商品分类</label>
                                            <select class="form-select" id="category" th:field="*{category}">
                                                <option value="">-- 选择分类 --</option>
                                                <option th:each="cat : ${categories}" th:value="${cat}" th:text="${cat}">分类</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="newCategory" class="form-label">新建分类</label>
                                            <input type="text" class="form-control" id="newCategory" name="newCategory">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="description" class="form-label">商品描述</label>
                                        <textarea class="form-control" id="description" th:field="*{description}" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 价格库存 -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">价格与库存</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="purchasePrice" class="form-label">进货价格 <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="purchasePrice" th:field="*{purchasePrice}" step="0.01" min="0" required>
                                                <span class="input-group-text">元</span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="sellingPrice" class="form-label">销售价格 <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="sellingPrice" th:field="*{sellingPrice}" step="0.01" min="0" required>
                                                <span class="input-group-text">元</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="quantity" class="form-label">库存数量 <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="quantity" th:field="*{quantity}" min="0" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="unit" class="form-label">单位 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="unit" th:field="*{unit}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 其他信息 -->
                            <div class="card mb-4">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">其他信息</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="supplier" class="form-label">供应商</label>
                                        <input type="text" class="form-control" id="supplier" th:field="*{supplier}">
                                    </div>
                                    
                                    <div class="form-check mb-3" th:if="${product.id != null}">
                                        <input class="form-check-input" type="checkbox" id="active" th:field="*{active}">
                                        <label class="form-check-label" for="active">启用商品</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a th:href="@{/products}" class="btn btn-secondary me-md-2">取消</a>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            // 处理新建分类
            document.addEventListener('DOMContentLoaded', function() {
                const categorySelect = document.getElementById('category');
                const newCategoryInput = document.getElementById('newCategory');
                
                newCategoryInput.addEventListener('input', function() {
                    if (this.value.trim() !== '') {
                        categorySelect.value = '';
                        categorySelect.disabled = true;
                    } else {
                        categorySelect.disabled = false;
                    }
                });
                
                categorySelect.addEventListener('change', function() {
                    if (this.value !== '') {
                        newCategoryInput.value = '';
                    }
                });
                
                // 表单提交前处理
                document.querySelector('form').addEventListener('submit', function(event) {
                    if (newCategoryInput.value.trim() !== '') {
                        categorySelect.disabled = false;
                        categorySelect.value = newCategoryInput.value.trim();
                    }
                });
            });
        </script>
    </div>
</body>
</html> 